import CodeMirror from "./CodeMirror";
// import { Button } from "../ui/button";
import { Settings } from "../../types";
import copy from "copy-to-clipboard";
import { useCallback } from "react";
import toast from "react-hot-toast";
import styles from "./styles/code-tab.module.less";
import IconCopy from "@/assets/icons/copy.svg?react";
import classNames from 'classnames';

interface Props {
  code: string;
  setCode: React.Dispatch<React.SetStateAction<string>>;
  settings: Settings;
  plainStyle?: boolean;
}

function CodeTab({ code, setCode, settings, plainStyle = false }: Props) {
  const copyCode = useCallback(() => {
    copy(code);
    toast.success("Copied to clipboard");
  }, [code]);

  // const doOpenInCodepenio = useCallback(async () => {
  //   // TODO: Update CSS and JS external links depending on the framework being used
  //   const data = {
  //     html: code,
  //     editors: "100", // 1: Open HTML, 0: Close CSS, 0: Close JS
  //     layout: "left",
  //     css_external:
  //       "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" +
  //       (code.includes("<ion-")
  //         ? ",https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
  //         : ""),
  //     js_external:
  //       "https://cdn.tailwindcss.com " +
  //       (code.includes("<ion-")
  //         ? ",https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js,https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
  //         : ""),
  //   };

  //   // Create a hidden form and submit it to open the code in CodePen
  //   // Can't use fetch API directly because we want to open the URL in a new tab
  //   const input = document.createElement("input");
  //   input.setAttribute("type", "hidden");
  //   input.setAttribute("name", "data");
  //   input.setAttribute("value", JSON.stringify(data));

  //   const form = document.createElement("form");
  //   form.setAttribute("method", "POST");
  //   form.setAttribute("action", "https://codepen.io/pen/define");
  //   form.setAttribute("target", "_blank");
  //   form.appendChild(input);

  //   document.body.appendChild(form);
  //   form.submit();
  // }, [code]);

  return (
    <div className={classNames(styles.box, { [styles.plain]:  plainStyle})}>
      <div className={styles.copy_btn}>
        <span
          onClick={copyCode}
        >
          <IconCopy />
        </span>
        {/* <Button
          onClick={doOpenInCodepenio}
          className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none"
        >
          Open in{" "}
          <img
            src="https://assets.codepen.io/t-1/codepen-logo.svg"
            alt="codepen.io"
            className="h-4 ml-1"
          />
        </Button> */}
      </div>
      <CodeMirror
        code={code}
        editorTheme={settings.editorTheme}
        onCodeChange={setCode}
      />
    </div>
  );
}

export default CodeTab;
